<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>取款</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="/static/css/style.css">
</head>
<body>
  <div class="d-flex">
    <nav class="flex-column bg-primary text-white p-3" style="width: 220px; height: 100vh;">
      <h4>客户中心</h4>
      <ul class="nav flex-column">
        <li class="nav-item"><a href="/customer/dashboard" class="nav-link text-white">首页</a></li>
        <li class="nav-item"><a href="/customer/balance" class="nav-link text-white">余额查询</a></li>
        <li class="nav-item"><a href="/customer/transactions" class="nav-link text-white">交易查询</a></li>
        <li class="nav-item"><a href="/customer/deposit" class="nav-link text-white">存款</a></li>
        <li class="nav-item"><a href="/customer/withdraw" class="nav-link text-white active">取款</a></li>
        <li class="nav-item"><a href="/customer/report_loss" class="nav-link text-white">挂失</a></li>
        <li class="nav-item"><a href="/customer/change_password" class="nav-link text-white">修改密码</a></li>
      </ul>
    </nav>
    <main class="flex-fill p-4">
      <h3>取款</h3>
      <button class="btn btn-danger mb-2" data-bs-toggle="modal" data-bs-target="#withdrawModal">取款</button>
      <div id="withdrawResult"></div>
    </main>
  </div>
  <!-- 取款 Modal -->
  <div class="modal fade" id="withdrawModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <form id="withdrawForm">
          <div class="modal-header">
            <h5 class="modal-title">取款</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
          </div>
          <div class="modal-body">
            <input type="text" class="form-control mb-2" id="withdrawCardID" placeholder="请输入银行卡号">
            <input type="number" class="form-control mb-2" id="withdrawAmount" placeholder="请输入取款金额">
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
            <button type="submit" class="btn btn-primary">确认取款</button>
          </div>
        </form>
      </div>
    </div>
  </div>
  <script src="/static/js/main.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  <script>
  document.getElementById('withdrawForm').onsubmit = async function(e) {
    e.preventDefault();
    const cardID = document.getElementById('withdrawCardID').value;
    const amount = Number(document.getElementById('withdrawAmount').value);
    const res = await fetch('/api/customer/withdraw', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ cardID, amount })
    });
    const data = await res.json();
    document.getElementById('withdrawResult').innerHTML = data.balance !== undefined
      ? `<div class='alert alert-success'>取款成功，余额：${data.balance} 元</div>`
      : `<div class='alert alert-danger'>${data.msg || data.error || '取款失败'}</div>`;
    bootstrap.Modal.getInstance(document.getElementById('withdrawModal')).hide();
  };
  </script>
</body>
</html>